<template>
  <el-tag
    :type="type"
    v-if="hidden"
    effect="dark"
    class="order-logistic-tag"
  >
    {{text}}
  </el-tag>
</template>

<script>
export default {
  name: "OrderLogisticTag",
  props:{
    logisticType:{
      require: true,
    },
    orderStatus:{
      require: true,
    },
    orderBeforeTime:{
      require: true,
    },
    ignore:{
      default : 0,
    }
  },
  watch: {
    logisticType(){
      this.changeType()
    },
    orderStatus(){
      this.changeType()
    },
    orderBeforeTime(){
      this.changeType()
    }
  },
  data(){
    return {
      text: '',
      type: '',
      hidden: true,
    }
  },
  created() {
    this.changeType()
  },
  methods:{
    changeType(){
      this.hidden = true
      switch (this.logisticType){
        case 'drop_off':
          this.type = 'express'
          this.text = this.$t('order.express')
          break;
        case 'self_service':
          this.type = 'self-service-1'
          this.text = 'Flex'
          if(this.orderStatus === 1){
            if(this.orderBeforeTime){
              this.text = `Flex (${this.$t('common.today')})`
            }else{
              this.type = 'self-service-2'
              this.text = `Flex (${this.$t('common.tomorrow')})`
            }
          }
          break;
        case 'cross_docking':
          this.type = 'cross-docking-1'
          this.text = 'Colecta'
          if (this.$store.getters.siteId === 'CL') {
            break;
          }
          if(this.orderStatus === 1){
            if(this.orderBeforeTime){
              this.text = `Colecta (${this.$t('common.today')})`
            }else{
              this.type = 'cross-docking-2'
              this.text = `Colecta (${this.$t('common.tomorrow')})`
            }
          }
          break;
        default:
          this.hidden = false
          break;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.order-logistic-tag{
  font-weight: bold;
}
</style>
